<template>
  <div class="login-page">
    <div class="logo-bar">
      <img
        class="icon-logo"
        src="../../assets/image/login/logo.png"
        alt="logo"
      />
      <div class="flex flex-col title-1">
        <h1>山东大学附属儿童医院</h1>
        <h6>Shandong University Affiliated Children's Hospital</h6>
      </div>

      <div class="split-line"></div>

      <h2 class="title-2">医疗设备全生命周期管理系统</h2>
    </div>

    <div class="login-form flex-col">
      <h3>欢迎使用<span>医疗设备全生命周期管理系统</span></h3>
      <span class="login-title">账号登录</span>

      <a-form ref="formLogin" id="formLogin" :form="form" class="form-content">
        <a-form-item>
          <a-input
            size="large"
            type="text"
            placeholder="请输入您的用户名"
            v-decorator="[
              'login',
              {
                rules: [
                  { required: true, message: '请输入帐户名或邮箱地址' },
                  { validator: handleUsernameOrEmail },
                ],
                validateTrigger: 'change',
              },
            ]"
          >
            <img
              slot="prefix"
              class="ipt-icon"
              src="../../assets/image/login/icon_user.png"
            />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input
            size="large"
            type="password"
            autocomplete="false"
            placeholder="请输入密码"
            v-decorator="[
              'passwd',
              {
                rules: [{ required: true, message: '请输入密码' }],
                validateTrigger: 'blur',
              },
            ]"
          >
            <img
              slot="prefix"
              class="ipt-icon"
              src="../../assets/image/login/icon_password.png"
            />
          </a-input>
        </a-form-item>
        <a-row :gutter="2">
          <a-col :span="16">
            <a-form-item>
              <a-input
                size="large"
                type="text"
                placeholder="请输入验证码"
                v-decorator="[
                  'inputCode',
                  {
                    rules: [{ required: true, message: '请输入验证码' }],
                    validateTrigger: 'blur',
                  },
                ]"
              >
                <img
                  slot="prefix"
                  class="ipt-icon"
                  src="../../assets/image/login/icon_.png"
                />
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8" style="text-align: right">
            <img
              v-if="requestCodeSuccess"
              style="margin-top: 2px"
              :src="randCodeImage"
              @click="handleChangeCheckCode"
            />
            <img
              v-else
              style="margin-top: 2px"
              src="../../assets/checkcode.png"
              @click="handleChangeCheckCode"
            />
          </a-col>
        </a-row>
        <a-form-item layout="inline" style="margin-top: 15px">
          <a-checkbox
            v-decorator="[
              'rememberMe',
              { initialValue: true, valuePropName: 'checked' },
            ]"
            style="color: #007cff"
          >
            <span style="color: #007cff">记住密码</span>
          </a-checkbox>
        </a-form-item>

        <a-form-item style="margin-top: -15px">
          <a-button
            size="large"
            type="primary"
            htmlType="submit"
            style="width: 100%; height: 40px"
            @click.stop.prevent="handleSubmit"
            :style="{ fontSize: '18px', backgroundColor: '#007cff' }"
            ><span class="login-btn">立即登录</span>
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import md5 from "md5";
import TwoStepCaptcha from "@/components/tools/TwoStepCaptcha";
import { mapActions } from "vuex";
import { timeFix } from "@/utils/util";
import { getAction } from "@/api/manage";
import "@/assets/theme/css/fx.css";
export default {
  components: {
    TwoStepCaptcha,
  },
  data() {
    return {
      inputCode: "",
      randCodeImage: "",
      requestCodeSuccess: false,
      titylogoStyle: {
        backgroundImage: "url(" + require("@/assets/tinylogo.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% auto",
      },
      customActiveKey: "tab1",
      loginBtn: false,
      // login type: 0 email, 1 username, 2 telephone
      loginType: 0,
      isLoginError: false,
      requiredTwoStepCaptcha: false,
      stepCaptchaVisible: false,
      form: this.$form.createForm(this),
      state: {
        time: 60,
        loginBtn: false,
        // login type: 0 email, 1 username, 2 telephone
        loginType: 0,
        smsSendBtn: false,
      },
    };
  },
  created() {
    this.handleChangeCheckCode();
  },
  methods: {
    ...mapActions(["Login", "Logout"]),
    // handler
    handleUsernameOrEmail(rule, value, callback) {
      const { state } = this;
      const regex =
        /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
      if (regex.test(value)) {
        state.loginType = 0;
      } else {
        state.loginType = 1;
      }
      callback();
    },
    handleChangeCheckCode() {
      this.currdatetime = new Date().getTime();
      this.inputCode = "";
      getAction(`/system/auth/randomImage/${this.currdatetime}`)
        .then((res) => {
          // eslint-disable-next-line eqeqeq
          if (res.code == "0000") {
            this.randCodeImage = res.result.result;
            this.requestCodeSuccess = true;
          } else {
            this.$message.error(res.message);
            this.requestCodeSuccess = false;
          }
        })
        .catch(() => {
          this.requestCodeSuccess = false;
        });
    },
    handleSubmit(e) {
      e.preventDefault();
      const { state, Login } = this;

      state.loginBtn = true;
      this.form.validateFields(
        ["login", "passwd", "inputCode"],
        { force: true },
        (err, values) => {
          if (!err) {
            const loginParams = { ...values, checkKey: this.currdatetime };
            console.log("loginParams", loginParams);
            delete loginParams.login;
            loginParams[!state.loginType ? "email" : "login"] = values.login;
            values.passwd = "ATLASatlas!@#123";
            loginParams.passwd = md5(values.passwd);
            Login(loginParams)
              .then(
                (res) => {
                  this.loginSuccess(res);
                },
                (errors) => {
                  console.log(errors);
                  this.handleChangeCheckCode();
                }
              )
              .finally(() => {
                state.loginBtn = false;
              });
          } else {
            setTimeout(() => {
              state.loginBtn = false;
            }, 600);
          }
        }
      );
    },
    getCaptcha(e) {},
    stepCaptchaSuccess() {
      this.loginSuccess();
    },
    stepCaptchaCancel() {
      this.Logout().then(() => {
        this.loginBtn = false;
        this.stepCaptchaVisible = false;
      });
    },
    loginSuccess(res) {
      this.$router.push({ path: "/" });
      // 延迟 1 秒显示欢迎信息
      setTimeout(() => {
        this.$notification.success({
          message: "欢迎",
          description: `${timeFix()}，欢迎回来`,
        });
      }, 1000);
      this.isLoginError = false;
    },
  },
};
</script>

<style lang="less">
.flex {
  display: flex;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.login-page {
  width: 100vw;
  height: 100vh;
  background-image: url("../../assets/image/login/login_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;

  .logo-bar {
    display: flex;
    align-items: center;
    margin-left: 73px;
    margin-top: 58px;

    .icon-logo {
      width: 64px;
      height: 64px;
    }

    .title-1 {
      margin-left: 22px;
      h1 {
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-weight: bold;
        font-size: 28px;
        color: #0086cd;
        text-align: left;
        font-style: normal;
        margin: 0;
        line-height: 1;
      }
      h6 {
        margin-top: 9px;
        font-family: ArialMT;
        font-size: 14px;
        color: #0086cd;
        line-height: 16px;
        text-align: left;
        font-style: normal;
        line-height: 1;
      }
    }

    .split-line {
      width: 3px;
      height: 32px;
      background: #007cff;
      margin-left: 37px;
      margin-right: 30px;
    }

    .title-2 {
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: 400;
      font-size: 30px;
      color: #007cff;
      text-align: left;
      font-style: normal;
      line-height: 1;
      margin-bottom: 4px;
    }
  }

  .login-form {
    margin-top: 130px;
    width: 503px;
    background: rgba(255, 255, 255, 0.38);
    box-shadow: 0px 0px 9px 0px rgba(0, 29, 96, 0.11),
      inset 0px 0px 7px 0px #ffffff;
    border-radius: 14px;
    border: 1px solid #ffffff;
    backdrop-filter: blur(5px);
    margin-left: auto;
    margin-right: 224px;
    align-items: center;
    padding: 60px 0;

    h3 {
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: bold;
      font-size: 20px;
      color: #333333;
      line-height: 30px;
      text-align: left;
      font-style: normal;
      span {
        color: #0089ff;
      }
    }

    .login-title {
      margin-top: 41px;
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: bold;
      font-size: 20px;
      color: #333333;
      line-height: 30px;
      text-align: left;
      font-style: normal;
    }

    .form-content {
      margin-top: 30px;
      width: 306px;

      .ipt-icon {
        width: 20px;
        height: 20px;
      }

      .ant-form-item {
        height: unset !important;
      }

      .ant-input-affix-wrapper {
        border-radius: 6px;
        border: 1px solid #cbd0d2;
        overflow: hidden;
      }
      .ant-input {
        height: 40px;
        padding-left: 42px;

        border-radius: 6px;
        background-color: transparent !important;
      }
      .ant-input::-webkit-input-placeholder {
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-weight: 400;
        font-size: 12px;
        color: #a5b6c8;
        line-height: 18px;
        text-align: left;
        font-style: normal;
      }
      .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 2px;
      }
    }
    .login-tip {
      font-size: 13px;
      text-align: center;
      color: #bfbfbf;
    }
    .login-code {
      width: 33%;
      height: 38px;
      float: right;
      img {
        cursor: pointer;
        vertical-align: middle;
      }
    }
    .login-code-img {
      height: 38px;
    }

    .login-btn {
      font-weight: 400;
      font-size: 16px;
      color: #ffffff;
      line-height: 24px;
      text-align: left;
      font-style: normal;
    }
  }
}
</style>
